import { FC } from 'react';
import Box from '@mui/joy/Box';
import CodeEditor from './components/CodeEditor.tsx';
import Bar from './components/Bar.tsx';
import { Observer } from 'mobx-react-lite';
import { ROOM_MODE } from '../models/enum.ts';
import { useVM } from '@todo/ui';
import { RoomViewModel } from '../viewmodels/room.vm.ts';
import DrawEditor from './components/DrawEditor.tsx';
import Note from './components/Note.tsx';
import Stack from '@mui/joy/Stack';

const RoomPage: FC = () => {
  const vm = useVM(RoomViewModel);

  return (
    <Box
      sx={{
        height: '100%',
        overflowY: 'scroll',
      }}
    >
      <Stack direction="row" alignItems="stretch" width={1} height={1}>
        <Observer>
          {() => {
            switch (vm.mode) {
              case ROOM_MODE.CODE:
                return <CodeEditor />;
              case ROOM_MODE.DRAW:
                return <DrawEditor />;
            }
            return null;
          }}
        </Observer>
        <Observer>
          {() => {
            return vm.noteView ? <Note /> : null;
          }}
        </Observer>
      </Stack>
      <Bar />
    </Box>
  );
};

export default RoomPage;
